<template>
  <el-upload
    class="avatar-uploader"
    :action="cfg.baseUrl + '/resource/upload?type=' + type"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :headers="headers"
    :multiple="multiple"
    :show-file-list="false"
    name="multipartFile"
  >
    <!-- 处理单个上传还是多个上传 -->
    <template v-if="multiple">
      <div v-if="custom === 'default'" class="default_wrap">
        <div
          class="img_box"
          @click.stop="handleImg(index)"
          v-for="(item, index) in fileList"
          :key="index"
        >
          <el-image
            style="width: 100%; height: 100%"
            :src="item.url"
            fit="cover"
          ></el-image>
          <div @click="handleDelete(index)" class="delete">×</div>
        </div>
        <div class="upload_box">+</div>
      </div>
    </template>
    <template v-else>
      <div
        v-if="custom === 'custom'"
        @mouseleave="showTips = false"
        @mouseenter="showTips = true"
        class="sigle_wrap"
        :style="styleObject"
      >
        <div v-if="!showTips && !imageUrl" class="notips_wrap">
          <span class="jia">+</span>
          <span class="text">点击上传</span>
        </div>
        <div class="tips_wrap" v-if="showTips">
          <span class="name">推荐尺寸</span>
          <span v-if="showSizeTips" class="size">{{ size }}</span>
        </div>
        <div v-if="imageUrl" class="img_wrap">
          <el-image
            style="border-radius: 8px; width: 100%; height: 100%"
            :src="imageUrl"
            fit="cover"
          ></el-image>
        </div>
      </div>
      <!-- 上传头像 -->
      <div class="cover_wrap" v-if="custom === 'cover'">
        <div class="tips_wrap">
          <span class="name">点击上传</span>
        </div>
        <div v-if="imageUrl" class="img_wrap">
          <el-image
            style="border-radius: 8px; width: 100%; height: 100%"
            :src="imageUrl"
            fit="cover"
          ></el-image>
        </div>
      </div>
    </template>
    <!-- 自定义上传容器 -->
  </el-upload>
</template>
<script>
import cfg from "@/config";
import { LgetItem } from "@/utils/storage";
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    showSizeTips: {
      type: Boolean,
      default: true,
    },
    styleObject: {
      type: Object,
      default: function () {
        return {
          width: "120px",
          height: "150px",
        };
      },
    },
    imageUrl: {
      type: String,
      default: "",
    },
    custom: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    size: {
      type: String,
      default: "750*1334",
    },
  },
  watch: {
    fileList(val) {
      this.fileList = val;
    },
    imageUrl(val) {
      this.imageUrl = val;
    },
  },
  data() {
    return {
      showTips: false,
      cfg,
      headers: { Token: LgetItem("jwtToken") },
    };
  },
  methods: {
    beforeUpload(file) {
      console.log(file);
      return true;
    },
    handleSuccess(res, file) {
      console.log(res);
      if (res.code === 0) {
        if (this.multiple) {
          this.fileList.push({
            url: res.data,
          });
          this.$emit("handleSuccess", this.fileList);
        } else {
          this.imageUrl = res.data;
          this.$emit("handleSuccess", this.imageUrl);
        }
      } else {
        this.$message.error(res.desc);
      }

      console.log(file);
    },
    handleImg(index) {
      console.log(index);
    },
    handleDelete(index) {
      this.fileList.splice(index, 1);
      this.$emit("handleSuccess", this.fileList);
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader {
  font-size: 0;
}
.sigle_wrap {
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  .notips_wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    .jia{
      font-size: 40px;
      color: $themeColor;
      font-weight: bold;
    }
    .text{
      font-size: 14px; 
    }
  }
  .tips_wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 6;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    .name {
      color: $themeColor;
      font-size: 14px;
      line-height: 20px;
    }
    .size {
      font-size: 14px;
      color: #fff;
      margin-top: 5px;
      line-height: 20px;
    }
  }
  .img_wrap {
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    font-size: 0;
    z-index: 5;
  }
}
.default_wrap {
  display: flex;
  flex-wrap: wrap;
  .upload_box {
    margin-right: 10px;
    margin-top: 10px;
    font-size: 25px;
    border: 1px dashed #999;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
  }
  .img_box {
    margin-right: 10px;
    margin-top: 10px;
    width: 80px;
    height: 80px;
    font-size: 0;
    position: relative;
    .delete {
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 99;
      font-size: 14px;
      height: 22px;
      width: 22px;
      text-align: center;
      line-height: 22px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      color: #fff;
    }
    &:hover {
      .delete {
        opacity: 1;
      }
    }
  }
}
.cover_wrap {
  background-image: url("../../assets/images/cover.png");
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  position: relative;
  .tips_wrap {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    border-radius: 8px;
    &:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.5);
      .name {
        color: #fff;
        font-size: 16px;
      }
    }
  }
  .img_wrap {
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    font-size: 0;
    z-index: 5;
  }
}
</style>
